<template>
    <div id='canvas'></div>
</template>

<script setup>
import { onMounted, onUnmounted, onBeforeUnmount } from 'vue'
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import * as THREE from 'three'
let scene, camera, renderer, line
onMounted(() => {
    init()
})
const init = () => {
    let Can = document.getElementById('canvas')
    //场景
    scene = new THREE.Scene()
    scene.background = new THREE.Color(0xffffff)
    //相机
    camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
        500
    )
    camera.position.set(0, 0, 3000)
    camera.lookAt(0, 0, 0)
    //渲染控件
    renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)
    //轨道控件
    const controls = new OrbitControls(camera, renderer.domElement)
    controls.addEventListener('change', function () {
        renderer.render(scene, camera)
    })
    //坐标系
    //three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴，对于three.js的3D坐标系默认y轴朝上
    const axesHelper = new THREE.AxesHelper(300)
    scene.add(axesHelper)
    renderer.render(scene, camera)
    Can.appendChild(renderer.domElement)
}
</script>

<style></style>